<template>
  <el-dialog
    title="选择主题"
    v-model="show"
    width="400px"
    @close="closeDialog"
  >
    <div class="theme-list">
      <ColoredButton
        color1="rgb(0, 0, 0)"
        color2="rgb(23, 200, 164)"
        @click="changeTheme('default')"
      />
      <ColoredButton
        color1="rgb(255, 255, 255)"
        color2="rgb(23, 200, 164)"
        @click="changeTheme('light')"
      />
      <ColoredButton
        color1="rgb(0, 0, 0)"
        color2="rgb(23, 114, 200)"
        @click="changeTheme('black-blue')"
      />
      <ColoredButton
        color1="rgb(255, 255, 255)"
        color2="rgb(23, 114, 200)"
        @click="changeTheme('white-blue')"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, defineExpose } from "vue";
import ColoredButton from "../ColoredButton/ColoredButton.vue";

const show = ref(false);

// 在组件加载时，读取并应用存储的主题
onMounted(() => {
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    document.documentElement.setAttribute("data-theme", storedTheme);
  }
});

function open() {
  show.value = true;
}

defineExpose({ open });

const closeDialog = () => {
  show.value = false;
};

const changeTheme = (theme) => {
  // 保存用户选择的主题到 localStorage
  localStorage.setItem('theme', theme);
  document.documentElement.setAttribute("data-theme", theme);
  closeDialog();
};
</script>

<style scoped>
.theme-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 10px;
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
